import React, { Component } from 'react'

// 1.创建 Context 对象
const NameContext = React.createContext()

export default class Context extends Component {
    state={
        name:'xm'
    }
    render() {
        return (
            <div>
                Context 往后代组件传参
                {/* 2.传入 */}
                <NameContext.Provider value={this.state.name}>
                    <B/>
                </NameContext.Provider>
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div>
                 --- B
                <C/>
            </div>
        )
    }
}

class C extends Component {
    render() {
        return (
            <div>
                 ---  --- C
                <D/>
            </div>
        )
    }
}
class D extends Component {
    // 3.声明
    static contextType = NameContext
    render() {
        console.log(this.context)
        return (
            <div>
                {/* 4.使用 */}
                ---  ---  --- D {this.context}
                <E/>
            </div>
        )
    }
}
function E(){

    return <NameContext.Consumer>
        {
            val=><div> ---  ---   ---  ---  E {val}</div>
        }
    </NameContext.Consumer>
}
